import React, { useEffect } from 'react'
import { Layout } from 'antd'
import LayoutMenu from '@/ui/antd/pages/main/layout/menu/LayoutMenu'

import './Main.less'
import useLayoutStore from '@/ui/antd/store/useLayoutStore'
import LayoutHeader from '@/ui/antd/pages/main/layout/header/LayoutHeader'
import LayoutFooter from '@/ui/antd/pages/main/layout/footer/LayoutFooter'
import LayoutTabs from '@/ui/antd/pages/main/layout/tabs/LayoutTabs'

const Main = (props: any) => {
	const { Sider, Content } = Layout
	const { isCollapse } = useLayoutStore()

	// 监听窗口大小变化
	const updateSize = () => {
		console.log('updateSize监听窗口大小变化')
		let screenWidth = document.body.clientWidth
		if (!isCollapse && screenWidth < 1200) useLayoutStore.getState().updateCollapse(true)
		if (!isCollapse && screenWidth > 1200) useLayoutStore.getState().updateCollapse(false)
	}
	const onResize = () => {
		updateSize()
	}
	useEffect(() => {
		window.addEventListener('resize', onResize)
		return () => {
			window.removeEventListener('resize', onResize)
		}
	}, [])

	return (
		<Layout style={{ minHeight: '100vh' }}>
			<Sider trigger={null} collapsed={isCollapse} width={220}>
				<LayoutMenu></LayoutMenu>
			</Sider>
			<Layout>
				<LayoutHeader></LayoutHeader>
				<LayoutTabs />
				<LayoutFooter></LayoutFooter>
			</Layout>
		</Layout>
	)
}
export default Main
